<template>
  <div class="comp">
    <!-- 放置图表的容器 -->
    <div class="chart" ref="pie"></div>
  </div>
</template>

<script>
// 引入混入文件模块
import mixin from "@/mixins/index.js";
export default {
    // 使用混入
    mixins:[mixin],
  mounted() {
        // console.log(this.$echarts);
        // 1.echarts实例初始化 静态配置项设置 基础图表绘制
        this.initEcharts();
        // 2.获取业务数据
        this.getData();
        // 3.监听窗口变化实现图表自适应
        window.addEventListener('resize',this.adapTive);
        // 4.调用适配方法
        this.adapTive();
  },
  methods: {
    // 1.echarts实例初始化 静态配置项设置 基础图表绘制
    initEcharts() {
        // 1.1获取实例
        this.echartsInstance = this.$echarts.init(this.$refs.pie, this.themeName);
        //console.log(this.echartsInstance);

        // 1.2设置绘图需要的静态配置项
        let initOptions={
            // 设置图例  图例的显示依赖于系列的名称
				legend:{
					show:true,
					top:"15%"
				},

            // 标题
            title:{
                text:"▌种植农作物面积统计",
                top:"3%",
                left:"3%"
            },

            // 提示
            tooltip:{
                show:true
            },

            // 图表类型
            series:[
                {
                    type:"pie",
                    label:{
                        show:true,
                    },
                    center:['50%','60%']  //饼图的中心（圆心）坐标，[横坐标，纵坐标]。
                }
            ]

        }

        // 1.3绘制基础图表
        this.echartsInstance.setOption(initOptions)

    },

    // 2.获取业务数据
    async getData(){
        let {data} = await this.$http.get('TotalAreaCropsProportion')
        // console.log(data);
        this.allData = data;
        //调用根据业务继续完善图表
        this.setEcharts()
    },

    //3.根据业务继续完善图表
    setEcharts(){
        // 1.组装类目数据和系列数据
        let cateData = this.allData.map(item=>item.name)
        // console.log(cateData);

        // 2.设置绘图配置项
        let setOptions={
            // 图表类型
            series:[
                {
                    data:this.allData
                }
            ]
        }
        // 3.setOption 合并多次的绘图配置项 完善图表
        this.echartsInstance.setOption(setOptions)

    },

    // 4.窗口适配方法
    adapTive(){
        // 通过比例尺的思想解决坐标系外的适配问题
        let width = this.$refs.pie.offsetWidth; 
        // 3.5-3.7
        let scale = width / 100 * 3.6
        // 设置动态需要适配的配置项
        let adapOptions = {
            //图例
				legend:{
					itemGap:scale/2,  //图例每项之间的间隔
                    itemWidth:scale,  
                    itemHeight:scale/2,

                    textStyle:{
                        fontSize:scale/2
                    }
				},
            // 标题
            title:{
                textStyle:{
                    fontSize:scale
                }
            },
            // 柱子宽度 圆角
            series:[{
                radius:scale*5
            }]
        }
        // 适配绘图
        this.echartsInstance.setOption(adapOptions)

        
        // 处理坐标系内的图图表适配
        this.echartsInstance.resize()
    }
  },
};
</script>

<style>
</style>